<template>
  <Container 
    title="AI智能字帖" 
    :showNavPadding="false"
    navColor="transparent"
    titleColor="#FFFFFF"
    pageColor="transparent"
  >
    <view class="container">
      <!-- 头部横幅区域 -->
      <view class="hero-section">
        <view class="hero-bg">
          <view class="hero-content">
            <text class="main-title">AI智能字帖</text>
            <text class="sub-title">传统书法遇见现代科技</text>
            <view class="decorative-line"></view>
          </view>
        </view>
      </view>

      <!-- 核心功能区域 -->
      <view class="main-action">
        <view class="action-card" @click="startPractice">
          <view class="card-content">
            <view class="icon-wrapper">
              <text class="icon">✍️</text>
            </view>
            <text class="action-title">开始练字</text>
            <text class="action-desc">AI智能生成个性化字帖</text>
          </view>
          <view class="card-decoration"></view>
        </view>
      </view>

      <!-- 特色功能展示区域 -->
      <view class="features-section">
        <text class="section-title">核心特色</text>
        <view class="features-grid">
          <view class="feature-card">
            <view class="feature-icon">🎯</view>
            <text class="feature-title">智能生成</text>
            <text class="feature-desc">AI分析书写习惯<br/>生成专属字帖</text>
          </view>
          
          <view class="feature-card">
            <view class="feature-icon">📊</view>
            <text class="feature-title">个性方案</text>
            <text class="feature-desc">量身定制练习<br/>循序渐进提升</text>
          </view>
          
          <view class="feature-card">
            <view class="feature-icon">🔍</view>
            <text class="feature-title">实时指导</text>
            <text class="feature-desc">书写过程监控<br/>即时纠正建议</text>
          </view>
        </view>
      </view>

      <!-- 底部装饰区域 -->
      <view class="bottom-decoration">
        <view class="seal-decoration">
          <text class="seal-text">智</text>
        </view>
      </view>
    </view>
  </Container>
</template>

<script>
import Container from '@/components/Container/index.vue'

export default {
  components: {
    Container
  },
  data() {
    return {
      
    }
  },
  onLoad() {
    
  },
  methods: {
    startPractice() {
      uni.navigateTo({
        url: '/pages/ai/dialog/index',
        fail: (err) => {
          console.error('导航失败:', err)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #EBF4FF 0%, #F8FAFC 100%);
  position: relative;
}

// 头部横幅区域
.hero-section {
  height: 400rpx;
  position: relative;
  overflow: hidden;
}

.hero-bg {
  height: 100%;
  background: linear-gradient(135deg, #2E5266 0%, #4A90A4 50%, #6DB4C4 100%);
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="brush" patternUnits="userSpaceOnUse" width="20" height="20"><path d="M5,5 Q10,2 15,5 Q18,10 15,15 Q10,18 5,15 Q2,10 5,5" fill="%23ffffff" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23brush)"/></svg>') repeat;
  }
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
}

.main-title {
  font-size: 48rpx;
  font-weight: bold;
  color: white;
  display: block;
  margin-bottom: 16rpx;
  text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.3);
  letter-spacing: 4rpx;
}

.sub-title {
  font-size: 26rpx;
  color: rgba(255,255,255,0.9);
  display: block;
  margin-bottom: 24rpx;
}

.decorative-line {
  width: 120rpx;
  height: 4rpx;
  background: linear-gradient(90deg, transparent, white, transparent);
  margin: 0 auto;
  border-radius: 2rpx;
}

// 核心功能区域
.main-action {
  padding: 60rpx 40rpx;
  display: flex;
  justify-content: center;
}

.action-card {
  width: 100%;
  max-width: 600rpx;
  background: white;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 32rpx rgba(46, 82, 102, 0.15);
  position: relative;
  overflow: hidden;
  border: 2rpx solid #E0F2F1;
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.98);
    box-shadow: 0 4rpx 16rpx rgba(46, 82, 102, 0.2);
  }
}

.card-content {
  padding: 60rpx 40rpx;
  text-align: center;
  position: relative;
  z-index: 2;
}

.icon-wrapper {
  width: 120rpx;
  height: 120rpx;
  background: linear-gradient(135deg, #4A90A4, #2E5266);
  border-radius: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 32rpx;
  box-shadow: 0 8rpx 24rpx rgba(46, 82, 102, 0.3);
}

.icon {
  font-size: 48rpx;
}

.action-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #2E5266;
  margin-bottom: 16rpx;
}

.action-desc {
  font-size: 26rpx;
  color: #64748B;
  line-height: 1.5;
}

.card-decoration {
  position: absolute;
  top: -20rpx;
  right: -20rpx;
  width: 80rpx;
  height: 80rpx;
  background: linear-gradient(45deg, #60A5FA, #3B82F6);
  border-radius: 50%;
  opacity: 0.1;
}

// 特色功能展示区域
.features-section {
  padding: 40rpx;
}

.section-title {
  display: block;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #2E5266;
  margin-bottom: 48rpx;
}

.features-grid {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
}

.feature-card {
  flex: 1;
  background: white;
  border-radius: 20rpx;
  padding: 40rpx 20rpx;
  text-align: center;
  box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.08);
  border: 1rpx solid #F1F5F9;
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4rpx;
    background: linear-gradient(90deg, #4A90A4, #6DB4C4);
  }
}

.feature-icon {
  font-size: 40rpx;
  margin-bottom: 20rpx;
  display: block;
}

.feature-title {
  display: block;
  font-size: 26rpx;
  font-weight: bold;
  color: #2E5266;
  margin-bottom: 12rpx;
}

.feature-desc {
  font-size: 22rpx;
  color: #64748B;
  line-height: 1.4;
}

// 底部装饰区域
.bottom-decoration {
  position: relative;
  height: 200rpx;
  margin-top: 60rpx;
}

.seal-decoration {
  position: absolute;
  right: 60rpx;
  top: 20rpx;
  width: 80rpx;
  height: 80rpx;
  background: #C8102E;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-15deg);
  box-shadow: 0 4rpx 12rpx rgba(200, 16, 46, 0.3);
}

.seal-text {
  color: white;
  font-size: 32rpx;
  font-weight: bold;
}

.wave-pattern {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60rpx;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 197, 253, 0.1));
  border-radius: 60rpx 60rpx 0 0;
}
</style>